import { Box, SxProps } from "@mui/system"
import React from "react"
import Avatar from "../../../../assets/avatar.jpg"
import { makeStyles } from "@mui/styles"
const useAnimate = makeStyles((theme: any) => ({
  rotatingElement: {
    animation: "$rotate 3s linear infinite", // 应用旋转动画
  },
  "@keyframes rotate": {
    from: {
      transform: "rotate(0deg)", // 起始旋转角度
    },
    to: {
      transform: "rotate(360deg)", // 结束旋转角度
    },
  },
}))
export enum PlayStatus {
  PLAY,
  PLAYING,
  ENDED,
  PAUSE,
  ERROR,
}
export interface PlayerInfoProps {
  value?: { name: string; cover?: string }
  status?: PlayStatus
  onToggle?: (value: any) => void
  sx?: SxProps
}
export default (props: PlayerInfoProps) => {
  const { value, sx, onToggle, status = PlayStatus.PAUSE } = props
  const animate = useAnimate()
  return (
    <Box
      sx={{ height: "100%", display: "flex", flexDirection: "column", ...sx }}
    >
      <Box
        className={"header"}
        sx={{
          display: "flex",
          justifyContent: "center",
          flexShrink: 0,
          p: 2,
          lineHeight: 2,
        }}
      >
        <Box>{value?.name || "暂无播放"}</Box>
      </Box>
      <Box
        className={"content"}
        sx={{ flexGrow: 1, display: "flex", justifyContent: "center" }}
      >
        <Box
          onClick={() => {
            onToggle && onToggle(value)
          }}
          className={`${animate.rotatingElement} cover`}
          sx={{
            width: 125,
            height: 125,
            borderRadius: "50%",
            border: "60px solid",
            backgroundSize: "contain",
            overflow: "hidden",
            animationPlayState:
              status == PlayStatus.PLAY
                ? "running!important"
                : "paused!important",
            boxShadow: "inset 0 0 0px 15px rgb(255 255 255 / 80%)",
            backgroundImage: `url(${value?.cover ?? Avatar})`,
          }}
        ></Box>
        <Box className={"rcl"}></Box>
        <Box className={"wave"}></Box>
        <Box className={"control"}></Box>
      </Box>
      <Box className={"footer"} sx={{ flexShrink: 0 }}></Box>
    </Box>
  )
}
